<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="pragma" content="no-cache" />
  <meta http-equiv="cache-control" content="no-cache" />
  <meta http-equiv="Expires" content="0" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Insert title here</title>
  <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
  <script type="text/javascript">
    $(function(){
      // ajax请求
      $("#ajaxBtn").click(function(){
        alert(11);
        $.ajax({
            url:"http://localhost:8080/JavaWeb1_war_exploded/ajaxServlet",
          //数据格式
            // data:"action=ajaxServlet1",
            data:{action:"ajaxServlet1"},
          //提交类型
            type:"GET",
            success:function (data){
              alert(data);
                $("#msg").html("名字为:"+data.name + "Id为:"+data.id);
            },
          dataType:"json"
        });
      });

      // ajax--get请求
      $("#getBtn").click(function(){
        // $.get("url","data",callBake,dataType)
        $.get("http://localhost:8080/JavaWeb1_war_exploded/ajax","action=proGet",function(data){
          alert(data.toString());
          $("#msg").html("get中获取的名字为:"+data.name + "Id为:"+data.id);
        },"json")

      });

      // ajax--post请求
      $("#postBtn").click(function(){
        //$.post("url","data",callBack,dataType)
        $.post("http://localhost:8080/JavaWeb1_war_exploded/ajax","action=proPost",function (data){
          alert(data);
          $("#msg").html("Post中获取的名字为:"+data.name + "Id为:"+data.id);
        },"json")

      });

      // ajax--getJson请求
      $("#getJSONBtn").click(function(){
          //$.getJSON("url","data",callBack);
          $.getJSON("http://localhost:8080/JavaWeb1_war_exploded/ajax","action=proJson",function (data){
            alert(data);
            $("#msg").html("Json中获取的名字为:"+data.name + "Id为:"+data.id);
          })
      });

      // ajax请求
      $("#submit").click(function(){
        // 把参数序列化

          $.getJSON("http://localhost:8080/JavaWeb1_war_exploded/ajax","action=seariaz&"+$("#form01").serialize(),function (data){
            //将表格中的值转化为键值对形式serialize()
            alert($("#form01").serialize());
            $("#msg").html("seariaz中获取的名字为:"+data.name + "Id为:"+data.id);

        });
      });

    });
  </script>
</head>
<body>
<div>
  <button id="ajaxBtn">$.ajax请求</button>
  <button id="getBtn">$.get请求</button>
  <button id="postBtn">$.post请求</button>
  <button id="getJSONBtn">$.getJSON请求</button>
</div>
<div id="msg">

</div>

<br/><br/>
<form id="form01" >
  用户名：<input name="username" type="text" /><br/>
  密码：<input name="password" type="password" /><br/>
  下拉单选：<select name="single">
  <option value="Single">Single</option>
  <option value="Single2">Single2</option>
</select><br/>
  下拉多选：
  <select name="multiple" multiple="multiple">
    <option selected="selected" value="Multiple">Multiple</option>
    <option value="Multiple2">Multiple2</option>
    <option selected="selected" value="Multiple3">Multiple3</option>
  </select><br/>
  复选：
  <input type="checkbox" name="check" value="check1"/> check1
  <input type="checkbox" name="check" value="check2" checked="checked"/> check2<br/>
  单选：
  <input type="radio" name="radio" value="radio1" checked="checked"/> radio1
  <input type="radio" name="radio" value="radio2"/> radio2<br/>
</form>
<button id="submit">提交--serialize()</button>
</body>
</html>